import React from 'react';
import AppBar from 'material-ui/AppBar';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import FontIcon from 'material-ui/FontIcon';
import Content from './Content';
import BottomNavigationExampleSimple from './Toggle';
import TabsExampleSimple from './Tabs';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const AppBarExampleIcon = () => (
    <div className="hbox">
        <div className="col">
            <AppBar
                title="Title"
                iconClassNameRight="muidocs-icon-navigation-expand-more"
                />
            <Content />
            <BottomNavigationExampleSimple />
            <TabsExampleSimple />
        </div>
        <div className="col w">
            <Menu>
                <MenuItem primaryText="Maps" leftIcon={<FontIcon className="material-icons" >home</FontIcon>} />
                <MenuItem primaryText="Books" />
                <MenuItem primaryText="Flights" />
                <MenuItem primaryText="Apps" />
            </Menu>
        </div>
    </div>
);

export default AppBarExampleIcon;